import Vue from 'vue'
import Component from 'vue-class-component'
import './topicStyle.css'
import Platform from '@/supports/platform'

@Component
export default class addTopicDetails extends Vue {

  topicInfo = []
  products = []
  uid = ''

  created() {
    this.uid = this.$store.getters.user.uid
    this.wrapperHeight = document.documentElement.clientHeight - 108
  }

  mounted() {
  }

  activated () {
    this.topicId = this.$route.params.id
    this.getData(this.topicId)
  }

  async getData(topicId) {
    try {
      const response = await this.$axios.post(('/topic/v1/topic/' + topicId), {})

      if (response.status === 0) {
        this.topicInfo = response.data
        this.products = response.data.topicProducts
      }
    } catch (e) {
      console.log(e)
    }
  }

  get caculateHeight() {
    return 'height:' + this.wrapperHeight + 'px'
  }

  createdProducts() {
    if (!this.products || this.products.length <= 0) {
      return
    }
    const product = this.products.map(value => {
      return <dl onClick={() => {this.handleClick(value.productId)}}>
        <dt><img src={value.productCover + '?x-oss-process=image/resize,m_pad,h_400,w_400,color_ffffff/quality,Q_80/format,jpg'}/></dt>
        <dd>
          <p class="ellipsis">{value.title}</p>
          <p class="ellipsis">{value.subTitle}</p>
          <p>{value.currencyLogo}{value.thirdTitle}</p>
        </dd>
      </dl>
    })
    return product
  }

  createDesc () {
    if (!this.topicInfo.description || this.topicInfo.description.length < 0) {
      return
    }
    const item = this.topicInfo.description.map(value => {
      return <p>{value}</p>
    })
    return item
  }

  handlerShare() {
    let pageUrl = window.location.hostname + '/buyerapp/topics/' + this.uid + '/' + this.$route.params.id
    let shareFriendOpt = {shareText: this.topicInfo.summary, shareTitle: this.topicInfo.title, shareUrl: pageUrl, cover: this.topicInfo.cover}
    Platform.handlerShareProduct(shareFriendOpt)
  }

  handleClick (id) {
      this.$router.push({name: 'productDetails', params: {productId: id, type: 'store'}})
  }

  handertopicList() {
    this.$router.go(-1)
  }

  render() {
    return (
      <div class="content">
        <mt-header class="header" fixed title={this.topicInfo.title}>
          <mt-button icon="back" slot="left" onClick={this.handertopicList}></mt-button>
        </mt-header>

        <div class="pageScroll" style={this.caculateHeight + ';padding-top:0; margin-top:64px;'}>
          <div class='topicImg'><img src={this.topicInfo.cover}/></div>
          <div class="topicDec">{this.createDesc()}</div>

          <div class="product-list">
            {this.createdProducts()}
          </div>
        </div>
        <div class="topicShare" onClick={this.handlerShare}>一键分享</div>
      </div>
    )
  }
}
